<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍品二维码生成</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .qrcode-box{
            position: relative;
            margin-top: 20px;
        }
        #qrcode{
            display: block;
            height: 85px;
            width: 85px;
            margin: 0 auto;
            overflow: hidden;
        }
        .goodsCode{
            position: absolute;
            left: 0;
            width: 100%;
            top: 50%;
            text-align: center;
            z-index: 99;
            margin-top: -10px;
        }
        .goodsCode i{
            margin-top: -10px;
            border-radius: 3px;
            background-color: #fff;
            padding: 0 3px;
            display: inline-block;
            font-size: 12px;
            font-style: normal;
            line-height: 20px;
            display: inline-block;
            transform: scale(0.8);
            -webkit-transform: scale(0.6);
        }
        input{
            border-radius: 3px;
            line-height: 40px;
            width: 120px;
            text-align: center;
            border: 1px solid #e5e5e5;
            cursor: #333;
            margin: 20px auto;
            font-size: 14px;
        }
        .btn{
            color: #fff;
            font-size: 16px;
            width: 120px;
            text-align: center;
            border-radius: 3px;
            line-height: 40px;
            background-color: #df3726;
            cursor: pointer;
            display: inline-block;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div ng-controller="qrcode" style="text-align: center;padding-top: 20px;">
        <span>拍品编号：</span>
        <input type="text" value="A001" id="url">
        <a onclick="create()" class="btn">生成二维码</a>
        <div class="qrcode-box">
            <span id="qrcode"></span>
            <span class="goodsCode"><i id="codeText"></i></span>
        </div>
    </div>
    <script src="libs/qrcode/qrcode.min.js"></script>
    <script>
        var code, qrcode
        function create() {
            // 获取URL
            code = document.getElementById('url').value
            // 添加logo
            document.getElementById('codeText').innerHTML = code
            // 清除上一次的二维码
            if(qrcode){
                document.getElementById('qrcode').innerHTML = ''
                qrcode.clear()
            }
            // 创建二维码
            qrcode = new QRCode(document.getElementById('qrcode'), {
                width : 85,
                height : 85
            })
            qrcode.makeCode('http://lions.dakaqi.cn/index/indexPage?type=4&auctionId=' + document.getElementById('url').value)
        }
    </script>
</body>
</html>